<template>
  <view class="page">
    <view class="tcard">
      <view class="top">
        <view class="">
          支付金额（元）
        </view>
        <view class="money">
          {{opt.amount}}
        </view>
      </view>
      
      <view class="tform">
        <view class="tform-item">
          <view class="label">
            费用类型
          </view>
          <view class="value">
            体检费用
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            体检医院
          </view>
          <view class="value">
            西南财大校医院
          </view>
        </view>
        <view class="tform-item">
          <view class="label">
            体检日期
          </view>
          <view class="value">
            {{opt.time}}
          </view>
        </view>
      </view>
    </view>
    
    <view class="btn" @click="pay">
      微信支付
    </view>
  </view>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import {pay} from '@/api/physical.js'
  export default {
    data() {
      return {
        amount: 0,
        time: '',
        name: '',
        pkg: {}
      }
    },
    computed:{
      ...mapGetters(['userInfo', 'userList']),
    },
    onLoad(opt) {
      this.opt = opt
      this.pkg = JSON.parse(opt.pkg)
      // this.amount = opt.amount
      // this.time = opt.time
      // this.name = opt.name
      // this.name = opt.name
    },
    methods: {
      pay() {
        const data = {
          body: this.pkg.pkgName,
          orderId: this.opt.orderId,
          // payMoney: this.opt.amount,
          payMoney: '0.01',
          spbCreIp: '127.0.0.1',
          openId: this.userInfo.userId,
          account: this.userInfo.userId
        }
        pay(data).then(res => {
          this.onBridgeReady(res)
        })
      },
      
      onBridgeReady(res) {
          WeixinJSBridge.invoke('getBrandWCPayRequest', {
              "appId": res.appId,     //公众号ID，由商户传入     
              "timeStamp": res.timeStamp,     //时间戳，自1970年以来的秒数     
              "nonceStr": res.nonceStr,      //随机串     
              "package": res.package,
              // "signType": "RSA",     //微信签名方式：     
              "signType": "MD5",     //微信签名方式：
              "paySign": res.paySign //微信签名 
          },
          function(res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                  alert('跳转成功页面')
              }
          });
      }
      // if (typeof WeixinJSBridge == "undefined") {
      //     if (document.addEventListener) {
      //         document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
      //     } else if (document.attachEvent) {
      //         document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
      //         document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
      //     }
      // } else {
      //     onBridgeReady();
      // }
    }
  }
</script>

<style lang="scss" scoped>
.money {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 52upx;
  color: #FFAA32;
  line-height: 44upx;
  margin: 40upx auto 60upx;
}
.tcard {
  margin-top: 30upx;
}
.top {
  text-align: center;
  border-bottom: 1px dashed rgba(0,0,0,0.12);
  padding-top: 24upx;
}
.tform-item {
  border: none;
}
.btn {
  margin: 80upx auto;
  width: 480upx;
  height: 64upx;
  background: #366AA4;
  border-radius: 64upx;
  text-align: center;
  line-height: 64upx;
  color: #FFF;
}
</style>
